<!-- 打卡页面  -->
<template>
  <div style="max-width: 750px; margin: 0 auto">
    <div class="big_box" style="max-width: 750px; margin: 0 auto">
      <!-- 上部分 开始 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="logistics_number"
          align="center"
          label="物流编号"
        >
        </el-table-column>
        <el-table-column prop="commodity_name" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="real_count" align="center" label="数量">
        </el-table-column>
        <el-table-column
          align="center"
          label="图片"
          v-if="$route.query.mode === 'read'"
        >
          <template slot-scope="scope">
            <van-image
              width="50"
              height="50"
              :src="it"
              v-for="(it, idx) in scope.row.commodity_images"
              :key="idx"
              style="margin-right: 5px"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="到货时间"
          prop="arrive_time"
        >
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <!-- <el-button type="text" size="small">上传</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <van-popup v-model="show" @close="cancel" :style="{ width: '90%' }">
      <div style="padding: 20px">
        <van-field
          v-model="from.real_count"
          type="number"
          label="实际数量"
          placeholder="请输入实际数量"
        />
        <el-upload
          action="https://toys.yjinzi.com/api/common/file"
          :file-list="from.commodity_images"
          list-type="picture-card"
          style="font-size: 108px"
          :on-success="onSuccess"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file, index }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <!-- <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span> -->
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <!-- <van-uploader v-model="from.commodity_images" :after-read="afterRead" /> -->
        <!-- 到货时间 -->
        <!-- <van-field
          v-model="from.arrive_time"
          label="到货时间"
          :readonly="true"
          @focus="showDate = true"
          placeholder="请选择到货时间"
        />
        <van-datetime-picker
          v-model="from.date"
          type="date"
          v-show="showDate"
          @confirm="confirmDate"
          @cancel="showDate = false"
        /> -->
        <div style="display: flex; justify-content: end">
          <van-button size="small" style="margin-right: 10px" @click="cancel"
            >取消</van-button
          >
          <van-button type="primary" size="small" @click="submit"
            >确认</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
// import Mixin from "./clockin";
// import clockinMixin from "./clockinMixin";
export default {
  name: "clockInView",
  components: {
    /** popup 弹出框 */
    // popup: () => import('./popupView.vue')
  },
  // mixins: [Mixin, clockinMixin],
  data() {
    return {
      tableData: [],
      show: false,
      from: {
        commodity_id: 0,
        real_count: "",
        commodity_images: [],
        arrive_time: "",
        date: new Date(),
      },
      showDate: false,
      disabled: false,
    };
  },
  mounted() {},
  async created() {
    await this.getList();
  },
  methods: {
    async submit() {
      try {
        if (this.from.real_count === "") {
          return this.$notify({ type: "danger", message: "请输入实际数量" });
        }
        // if (this.from.arrive_time === "") {
        //   return this.$notify({ type: "danger", message: "请选择到货时间" });
        // }
        let params = {
          commodity_id: this.from.commodity_id,
          real_count: this.from.real_count,
          commodity_images: this.from.commodity_images.map((it) => it.url),
          arrive_time: this.$moment().format("YYYY-MM-DD"),
        };
        let res = await this.$api.editCommodity(params);
        this.$notify({ type: "success", message: "修改成功" });
        this.cancel();
      } catch (err) {
        this.$notify({ type: "danger", message: err.toString() });
      }
    },
    // 取消
    cancel() {
      this.showDate = false;
      this.show = false;
      this.from = {
        commodity_id: 0,
        real_count: "",
        commodity_images: [],
        arrive_time: "",
        date: new Date(),
      };
    },
    onSuccess(res) {
      this.from.commodity_images.push({
        uid: new Date().getTime(),
        url: res.data.download_url,
      });
    },
    handleRemove(file) {
      let index = this.from.commodity_images.findIndex(
        (it) => it.url === file.url
      );
      this.from.commodity_images.splice(index, 1);
    },
    // 选择时间
    confirmDate(val) {
      this.from.arrive_time = this.$moment(val).format("YYYY-MM-DD");
      this.showDate = false;
    },
    // 上传
    changeShow() {
      this.show = true;
    },
    async getList() {
      try {
        let params = {
          logistics_number: "aaa",
          commodity_name: "sss",
        };
        let res;
        if (this.$route.query.mode === "read") {
          res = await this.$api.getCommodity(params);
        }
        this.tableData = res.items;
      } catch (err) {
        console.log(err);
      }
    },
    handleClick(row) {
      console.log(row);
      this.from.commodity_id = row.id;
      this.from.commodity_images = row.commodity_images.map((it, idx) => {
        return {
          uid: idx,
          url: it,
        };
      });
      this.from.real_count = row.real_count;
      this.from.arrive_time = row.arrive_time;
      this.show = true;
    },
  },
};
</script>
<style scoped >
::v-deep(.el-upload--picture-card) {
  height: 120px !important;
  width: 120px !important;
  line-height: 62px !important;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 80px !important;
  height: 80px !important;
}
::v-deep(.el-upload-list--picture-card) {
  flex-wrap: wrap;
  display: flex !important;
}
.big_box {
  width: 100%;
  background: url("https://s3.bmp.ovh/imgs/2023/02/27/072d644dbb04f591.png");
  background-size: 100% 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 0.3125rem;
  font-size: 0.15rem;
  color: #404040;
}
.big_box_top {
  padding-left: 10px;
  margin-top: 10px;
}
</style>
